<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../plugins/elementUI/element-plus_dist.css">
</head>
<body>
<div id="app">
    <el-row>
        <el-button type="primary" @click="addShow">新增</el-button>
    </el-row>
    <el-row>
        <el-col :span="24">
            <el-table :data="tableData" style="width: 80%; margin-top: 100px; margin-left: 20%">
                <el-table-column fixed prop="id" label="主键" width="150"></el-table-column>
                <el-table-column prop="name" label="课程名字" width="120"></el-table-column>
                <el-table-column prop="content" label="课程描述" width="300"></el-table-column>
                <el-table-column prop="teacherName" label="授课教师名字" width="120"></el-table-column>
                <el-table-column fixed="right" label="操作" width="150">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="handleClick">
                            <el-icon :size="20">
                                <More />
                            </el-icon>
                        </el-button>

                        <el-button link type="primary" size="small" @click="handleEdit(scope.row)">
                            <el-icon :size="20">
                                <Edit />
                            </el-icon>
                        </el-button>
                        <el-button link type="danger" size="small" @click="handleDelete(scope.row)">
                            <el-icon :size="20">
                                <Delete />
                            </el-icon>
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
        <el-dialog v-model="dialogFormVisible" title="课程编辑">
            <el-form :model="form">
                <el-form-item label="课程名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off" />
                </el-form-item>
                <el-form-item label="课程描述" :label-width="formLabelWidth">
                    <el-input v-model="form.content" autocomplete="off" />
                </el-form-item>
                <el-form-item label="授课老师名字" :label-width="formLabelWidth">
                    <el-input v-model="form.teacherName" autocomplete="off" />
                </el-form-item>
            </el-form>
            <template #footer>
                  <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="handleSubmit">
                      提交
                    </el-button>
                  </span>
            </template>
        </el-dialog>
        <el-dialog v-model="dialogFormVisibleAdd" title="课程添加">
            <el-form :model="form">
                <el-form-item label="课程名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off" />
                </el-form-item>
                <el-form-item label="课程描述" :label-width="formLabelWidth">
                    <el-input v-model="form.content" autocomplete="off" />
                </el-form-item>
                <el-form-item label="授课老师名字" :label-width="formLabelWidth">
                    <el-input v-model="form.teacherName" autocomplete="off" />
                </el-form-item>
            </el-form>
            <template #footer>
                  <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="handleSave">
                      提交
                    </el-button>
                  </span>
            </template>
        </el-dialog>
    </el-row>
    <el-row>
        <el-col :span="12"></el-col>
        <el-col :span="12">
            <el-pagination
                    :page-size="5"
                    :pager-count="11"
                    layout="prev, pager, next"
                    :total="total"
                    @prev-click="preClick"
                    @next-click="nextClick"
                    @current-change="currentChange"
            />
        </el-col>
    </el-row>
</div>
<script src="../plugins/axios.min.js"></script>
<script src="../plugins/vue.global.js"></script>
<script src="../plugins/elementUI/element-plus.js"></script>
<script src="../plugins/elementUI/icon.min.js"></script>
<script>
    const {createApp, ref} = Vue
    const app = createApp({
        setup(){
            //对话框是否可见
            const dialogFormVisible = ref(false)
            const dialogFormVisibleAdd = ref(false)
            const formLabelWidth = '140px'
            const form = ref({
                name: '',
                content: '',
                teacherName: ''
            })
            //操作的函数
            const handleClick = () => {
                console.log('click')
            }
            const handleEdit = (data) => {
                dialogFormVisible.value = true
                form.value = data
            }
            const handleDelete = (data) =>{
                console.log(data)
                axios.post("/course/delete", data)
                    .then((res) => {
                        ElementPlus.ElMessage({
                            message: '删除成功.',
                            type: 'success',
                        })
                    }).catch((res)=>{

                    }).finally((res)=>{

                    })
            }
            const handleSave = () => {
                axios.post("/course/save", form.value)
                    .then((res) => {
                        tableData.value = res.data.data.records
                        total.value = res.data.data.total
                        console.log(total.value)
                        ElementPlus.ElMessage({
                            message: '新增成功.',
                            type: 'success',
                        })
                    }).catch((res)=>{

                    }).finally((res)=>{

                    })
                dialogFormVisibleAdd.value = false
            }
            const addShow = () => {
                dialogFormVisibleAdd.value = true
            }
            const handleSubmit = () => {
                axios.post("/course/edit", form.value)
                    .then((res) => {
                        tableData.value = res.data.data.records
                        total.value = res.data.data.total
                        console.log(total.value)
                    })
                    .catch((res)=>{

                    }).finally((res)=>{

                })
                dialogFormVisible.value = false
            }
            //数据
            let tableData = ref([])
            //总的条数
            let total = ref(0)
            //第一次查询数据
            getData(1)
            //上一页
            function preClick(currentPage){
                getData(currentPage)
            }
            //下一页
            function nextClick(currentPage){
                getData(currentPage)
            }
            //根据页码显示数据
            function currentChange(currentPage){
                getData(currentPage)
            }
            function getData(currentPage){
                axios.post("/course/page", {
                    size: 5,
                    current: currentPage
                })
                    .then((res) => {
                        tableData.value = res.data.data.records
                        total.value = res.data.data.total
                        console.log(total.value)
                    })
                    .catch((res)=>{

                    }).finally((res)=>{

                })
            }

            return {
                handleClick,
                tableData,
                preClick,
                nextClick,
                total,
                currentChange,
                dialogFormVisible,
                formLabelWidth,
                form,
                handleEdit,
                handleSubmit,
                dialogFormVisibleAdd,
                addShow,
                handleSave,
                handleDelete
            }
        }
    });
    app.use(ElementPlus);
    //讲element-plus的icons引入进来
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        app.component(key, component)
    }
    app.mount("#app");
</script>
</body>
</html>